<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">count++</button></p>
        <p><button @click="count=10">count赋值</button></p>
        <p><button @click="addCount">count++</button></p>
    </div>
</body>
<script>
    // console.log(Vue);  

    // 组合式

    // Vue3中   全局对象(存放各种方法 -> 后期要用)
    let {createApp} = Vue;   
    let {ref,reactive,readonly,watch,computed} = Vue;

    let {onBeforeMount,onMounted,onBeforeUpdate,onUpdateed,onBeforeUnmount,onUnmounted} = Vue;

    
    //  onBeforeMount 注册一个回调函数，在组件挂载之前执行。
    //  onMounted 注册一个回调函数，在组件挂载完成后执行。
    //  onBeforeUpdate 注册一个回调函数，在组件更新之前执行。
    //  onUpdateed 注册一个回调函数，在组件更新之后执行。
    //  onBeforeUnmount 注册一个回调函数，在组件销毁之前执行。
    //  onUnmounted 注册一个回调函数，在组件销毁之后执行。

    // 回调函数可以注册多个 => 按顺序执行


    var app = createApp({
       // 采用组合式写法

       setup:function(props){
            

            let count = ref(10); 
            console.log(count);

            let doubleCount = computed(()=>{
                return count.value * 2;
            })

            let addCount = () =>{
                count.value ++;   // 在组合式中修改数据 通过ref对象的.value
            }

            watch(count,(newVal,oldVal)=>{
                console.log("count发生改变",newVal,oldVal);
            })


            onMounted(()=>{
                console.log("组件挂载完毕:1");
            })
            onMounted(()=>{
                console.log("组件挂载完毕:2");
            })



            // 原理 => 闭包
            return {
                count:count,  
                doubleCount,
                addCount:addCount,
            }

       },
        // 选项式写法
        //    beforeCreate() {
            
        //    },
        //    created() {
            
        //    },
        //    beforeMount() {
            
        //    },
        //     // 依旧可以使用选项式写法   (重复注册 后面的覆盖前面的)
        mounted() {
            console.log("组件挂载完毕:3",this);
        },
        mounted() {
            console.log("组件挂载完毕:4",this);
        },
        components:{
            
        }
    })

    app.mount("#app");








</script>
</html>